<template>
  <div class="goods">
    <div class="menuwrapper" ref="menuWrapper">
      <ul>
        <li v-for="(item,index) in goods" :key="index" class="menu-item" :class="{'current': currentIndex === index}" @click="selectMenu(index)">
          <span class="text">
            <span v-show="item.type > 0" class="icon" :class="classMap[item.type]" ></span>{{item.name}}
          </span>
        </li>
      </ul>
    </div>
    <div class="foodwrapper" ref="foodWrapper">
      <ul>
        <li v-for="(item,index) in goods" :key="index" class="food-list food-list-hook">
          <h1 class="title">{{ item.name }}</h1>
          <ul>
            <li v-for="(food,index) in item.foods" :key="index" class="food-item" @click.stop.prevent="selectFood(food)">
              <div class="icon">
                <img :src="food.icon" width="57" height="57">
              </div>
              <div class="content">
                <h2 class="name">{{ food.name }}</h2>
                <p class="desc">{{ food.description }}</p>
                <div class="extra">
                  <span class="count">月售{{ food.sellCount }}份</span><span>好评率{{ food.rating }}%</span>
                </div>
                <div class="price">
                  <span class="now">￥{{ food.price }}</span><span v-show="food.oldPrice" class="old">￥{{ food.oldPrice }}</span>
                </div>
                <div class="cartcontrol-wrapper">
                  <cartcontrol :food="food"></cartcontrol>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <shopcart ref="shopcart" :selectFoods="selectFoods" :seller="seller"></shopcart>
    <food :food="selectedFood" ref="food"></food>
  </div>


</template>
<script>
import BScroll from 'better-scroll'
import shopcart from 'components/shopcart/shopcart'
import cartcontrol from 'components/cartcontrol/cartcontrol'
import Bus from '../../common/js/eventBus'
import food from 'components/food/food'
const ERR_OK = 0
export default {
  props: {
    seller: {
      type: Object
    }
  },
  data() {
    return {
      goods: [],
      listHeight: [],
      scrollY: 0,
      classMap: ['decrease', 'discount', 'special', 'invoice', 'guarantee'],
      selectedFood: {}
    }
  },
  created() {
    // 获取食物数据
    this.$http.get('/api/goods').then((response) => {
      response = response.body
      if (response.errno === ERR_OK) {
        this.goods = response.data
        this.$nextTick(() => {
          // 实现BetterScroll滚动,必须等到dom更新完后才能执行
          this._initScroll()
          this._calculateHeight()
        })
      }
    })
    Bus.$on('cart.add', el => {
      this.$nextTick(() => {
        console.log('this.$refs.shopcart' + this.$refs.shopcart)
        console.dir(this.$refs.shopcart)
        this.$refs.shopcart.drop(el)
      })
    })
  },
  methods: {
    _initScroll() {
      this.menuScroll = new BScroll(this.$refs.menuWrapper, {
        // 传这个值实现点击，不然系统默认点击行为会被better-scroll取消
        click: true
      })
      this.foodScroll = new BScroll(this.$refs.foodWrapper, {
        click: true,
        // 实时监测滚动的位置，返回滚动的位置
        probeType: 3
      })
      this.foodScroll.on('scroll', (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y))
      })
    },
    _calculateHeight() {
      let foodList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook')
      console.log('foodList:' + foodList.length)
      let height = 0
      this.listHeight.push(height)
      for (let i = 0; i < foodList.length; i++) {
        let item = foodList[i]
        height += item.clientHeight
        this.listHeight.push(height)
      }
    },
    selectMenu(index, event) {
      // // better-scroll 可以监听到此事件，浏览器原生不能监听到  防止pc端出现两次点击
      // if (!event._constructed) {
      //   return;
      // }
      // 获取食物的li Dom节点列表
      let foodList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook')
      let el = foodList[index]
      // 调用better-scroll 方法滚动到响应位置
      this.foodScroll.scrollToElement(el, 300)
    },
    // 将传过来的食物设置为被点击的食物并传递给子组件
    selectFood(food) {
      this.selectedFood = food
      console.dir(this.selectedFood)
      // 当点击时，弹出食物组件的界面
      this.$refs.food.show()
    }
  },
  computed: {
    selectFoods() {
      let foods = []
      this.goods.forEach((good) => {
        good.foods.forEach((food) => {
          if (food.count) {
            foods.push(food)
          }
        })
      })
      return foods
    },
    currentIndex() {
      for (let i = 0; i < this.listHeight.length; i++) {
        let height1 = this.listHeight[i]
        let height2 = this.listHeight[i + 1]
        if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
          console.log('currentIndex' + i)
          return i
        }
      }
      return 0
    }
  },
  components: {
    shopcart,
    cartcontrol,
    food
  }
}
</script>
<style lang="scss" scoped>
@import "../../common/scss/mixins";
.goods {
  position: absolute;
  top: 174px;
  bottom: 46px;
  width: 100%;
  display: flex;
  overflow: hidden;
  .menuwrapper {
    flex: 0 0 80px;
    background-color: cyan;
    .menu-item {
      display: table;
      height: 54px;
      width: 56px;
      line-height: 14px;
      padding: 0 12px;
      &.current {
        position: relative;
        margin-top: -1px;
        z-index: 10;
        font-weight: 700;
        background-color: #fff;
        .text {
          @include border-none();
        }
      }
      .text {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        font-size: 12px;
        color: rgb(7, 17, 27);
        @include border-1px(rgba(7, 17, 27, 0.1));
        .icon {
          display: inline-block;
          vertical-align: top;
          width: 12px;
          height: 12px;
          margin-right: 2px;
          background-size: 12px 12px;
          background-repeat: no-repeat;
          &.decrease {
            @include bg-image("decrease_3");
          }
          &.discount {
            @include bg-image("discount_3");
          }
          &.guarantee {
            @include bg-image("guarantee_3");
          }
          &.invoice {
            @include bg-image("invoice_3");
          }
          &.special {
            @include bg-image("special_3");
          }
        }
      }
    }
  }
  .foodwrapper {
    flex: 1;
    background-color: #fff;
    .food-list {
      .title {
        height: 26px;
        padding-left: 14px;
        font-size: 12px;
        color: rgb(147, 153, 159);
        line-height: 26px;
        border-left: 2px solid #d9dde1;
        background-color: #f3f5f7;
      }
      .food-item {
        display: flex;
        font-size: 0;
        margin: 18px;
        padding-bottom: 18px;
        @include border-1px(rgba(7, 17, 27, 0.1));
        &:last-child {
          @include border-none();
          margin-bottom: 0;
        }
        .icon {
          flex: 0 0 57px;
          display: inline-block;
        }
        .content {
          flex: 1;
          padding-left: 10px;
          .name {
            font-size: 14px;
            color: rgb(7, 17, 27);
            line-height: 14px;
          }
          .desc {
            margin-top: 8px;
            font-size: 10px;
            color: rgb(147, 153, 159);
            line-height: 10px;
          }
          .extra {
            font-size: 10px;
            margin-top: 8px;
            color: rgb(147, 153, 159);
            line-height: 10px;
            .count {
              margin-right: 12px;
            }
          }
          .price {
            .now {
              font-size: 14px;
              color: #f01414;
              font-weight: normal;
              line-height: 24px;
            }
            .old {
              font-size: 10px;
              color: rgb(147, 153, 159);
              font-weight: normal;
              line-height: 24px;
              text-decoration: line-through;
            }
          }
          .cartcontrol-wrapper {
            position: absolute;
            bottom: 12px;
            right: 0;
          }
        }
      }
    }
  }
}
</style>

